<template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="search" ref="search">
          <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
            class="demo-form-inline" id="searchBox">
            <el-form-item prop="sendCode">
                <el-input v-model="searchForm.sendCode" clearable placeholder="推送编号"></el-input>
            </el-form-item>
            <el-form-item prop="sendTitle">
                <el-input v-model="searchForm.sendTitle" clearable placeholder="推送名称"></el-input>
            </el-form-item>
            <!-- <el-form-item prop="sendTime">
              <el-date-picker v-model="sendTime" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="发送开始日期" end-placeholder="发送结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
              </el-date-picker> -->
            </el-form-item>
            <el-form-item class="clearfix">
              <el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="actionBtn" ref="actionBtn">
          <div class="actionBtnLeft">

             <el-button type="primary" @click="handleAdd()" size="small"  icon="el-icon-plus" v-has="'msg:pushMsg:add'">添加推送</el-button>
          </div>
          <div class="actionBtnRight">
              <MyRefresh></MyRefresh>
          </div>
        </div>
        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%" border :height="tableHeight" stripe v-loading="loading">
            <el-table-column prop="sendCode" label="推送编号" width="200" align="center"></el-table-column>
            <el-table-column prop="sendTitle" label="推送名称" width="280" align="center"></el-table-column>
            <el-table-column prop="content" label="推送内容" align="left">
              <template slot-scope="scope">
                <div class="ellipsis-item2" :title="scope.row.content">
                  {{scope.row.content}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="申请日期" width="160" align="center">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="auditBy" label="申请人(工号)" width="180" align="center"></el-table-column>
            <el-table-column prop="auditTime" label="审核日期" width="160" align="center">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.auditTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="auditRemark" label="审核备注" align="center" show-overflow-tooltip></el-table-column>

            <el-table-column prop="content" label="推送日期"  width="160" align="center">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.auditTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="content" label="状态"  width="150" align="center">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.auditStatus=='1'">待审核</el-tag>
                <el-tag v-else-if="scope.row.auditStatus=='2'" type="success">已通过</el-tag>
                <el-tag v-else-if="scope.row.auditStatus=='3'" type="warning">已驳回</el-tag>
              </template>
            </el-table-column>

            <el-table-column prop="name" label="操作" width="250"  align="center" fixed="right">
              <template #default="scope">
                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-view"
                    @click="handleView(scope.row)"
                  >查看</el-button>
                 <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-document-checked"
                    @click="handleAudit(scope.row)"
                    v-if="scope.row.auditStatus=='1'"
                  >审核</el-button>
               <!--   <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleEdit(scope.row)"
                    v-has="'msg:pushMsg:add'"
                  >修改</el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page" ref="page">
          <MyPagination
            :total="total"
            :page.sync="searchForm.pageNum"
            :limit.sync="searchForm.pageSize"
            @pagination="dataInfo"
          />
        </div>
      </el-col>
    </el-row>

    <!-- 添加或修改推送 -->
    <el-dialog :title="dialogTitle" width="800px" v-dialogDrag :visible.sync="sendMsgVisible" @close="sendMsgVisible = false" :close-on-click-modal="false">
      <el-form  :model="sendMsgForm" :rules="sendMsgRules" ref="sendMsgForm"  id="userDialog"  >
       <el-form-item label="推送名称" prop="sendTitle" label-width="110px">
          <el-input  v-model="sendMsgForm.sendTitle" autocomplete="off" :disabled="dialogTitle=='查看推送'" placeholder="请输入推送名称"></el-input>
       </el-form-item>

        <!-- <el-form-item label="推送有效期"  label-width="110px">
           <el-date-picker v-model="sendMsgForm.validTime" type="daterange" align="right" unlink-panels range-separator="至" :disabled="dialogTitle=='查看推送'"
             start-placeholder="推送有效期开始日期" end-placeholder="推送有效期结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
           </el-date-picker>
        </el-form-item> -->
        <el-form-item label="推送内容" prop="content" label-width="110px">
          <el-input type="textarea" rows="10" v-model="sendMsgForm.content" autocomplete="off" :disabled="dialogTitle=='查看推送'" placeholder="请输入推送内容"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="dialogTitle!='查看推送'">
        <el-button @click="sendMsgVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="addSendMsgSubmit('sendMsgForm')" size="small" :loading="btnLoading">保 存</el-button>
      </div>
    </el-dialog>

    <!-- 推送审核 -->
    <el-dialog title="推送审核" width="600px" :close-on-click-modal="false" v-dialogDrag :visible.sync="auditVisible" @close="auditVisible = false">
      <el-form  :model="auditForm" label-position="right" :rules="auditRules" ref="auditForm">
        <el-form-item label="" prop="auditStatus" label-width="85px" >
          <el-radio-group v-model="auditForm.auditStatus">
            <el-radio label="2">通过</el-radio>
            <el-radio label="3">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注:" prop="remarks" label-width="85px" >
          <el-input v-model="auditForm.remarks" type="textarea" autocomplete="off" :rows="4" placeholder="请填写审核备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="auditVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="auditSubmit('auditForm')" size="small" :loading="btnLoading">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import option from '../../common/option.js';
  import {
    addMessage,getMessageList,messageCenterAudit
  } from '@/api/getData';

  export default {
    data() {
      return {
        loading: false,
        btnLoading:false,
        typeList:[{id:'1',name:'系统'},{id:'2',name:'短信'}],
        auditStateList:[{id:'1',name:'待审核'},{id:'2',name:'已通过'},{id:'3',name:'已驳回'}],
        sendTime:'',
        auditTime:'',
        searchForm: {
          sendTitle:'',
          sendCode:'',

          pageNum:1,
          pageSize:20
        },
        tableHeight:0,//table 高度
        dataList:[],
        total: 0,
        sendMsgVisible:false,
        dialogTitle:"",
        sendMsgForm:{
          sendTitle:'',
          content:''
        },
        sendMsgRules:{
            sendTitle: [
              { required: true,message:'推送名称不能为空', trigger: 'blur' }
            ],
            content: [
              { required: true,message:'推送内容不能为空', trigger: 'blur' }
            ],

        },
        auditVisible:false,
        auditForm:{
          sendId:'',
          auditStatus:'',
          remarks:''
        },
        auditRules:{
            auditStatus: [
              { required: true,message:'请选择审核状态', trigger: 'blur' }
            ],
        },
      }
    },
    created() {

    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight - this.$refs.actionBtn.offsetHeight - this.$refs.page.offsetHeight - 45;
      })
    },
    methods: {
      phoneChange(name){
        this.sendMsgForm[name] = (this.sendMsgForm[name]).replace(/，/g,',').replace(/\s+/g,',').replace(/<\/?.+?>/g,',').replace(/[\r\n]/g,',')
      },
      hendleContent(content){
        this.content = content;
        this.dialogVisible = true;
      },
      handleSearch(){
          this.page = 1;
          this.dataInfo();
      },
      resetQuery(){
        this.sendTime = [];
        this.auditTime = [];
        this.resetForm('searchForm');
        this.dataInfo();
      },
      handleAdd(){
        this.sendMsgForm = {
          title:'',
          content:'',
        }
        this.resetForm('sendMsgForm');
        this.dialogTitle = '添加推送';
        this.sendMsgVisible = true;
      },
      handleView(row){
        this.dialogTitle = '查看推送';
        this.sendMsgForm.title = row.title;
        this.sendMsgForm.content = row.content;
        this.sendMsgVisible = true;
      },
      handleAudit(row){
        this.auditForm.sendId = row.sendId;
        this.auditForm.auditStatus = '';
        this.auditForm.remarks = '';
        this.auditVisible = true;
      },
      auditSubmit(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.btnLoading = true;
            messageCenterAudit(this.auditForm).then((result) => {
              if (result.code == 200) {
                this.$message.success(result.msg);
                this.auditVisible = false;
                this.dataInfo();
              } else {
                this.$message.error(result.msg);
              }
              this.btnLoading = false;
            });
          }
        })
      },
      handleEdit(row){
        this.dialogTitle = '修改推送';
        this.sendMsgForm.sendId = row.sendId;
        this.sendMsgForm.openShield = row.openShield+'';
        this.sendMsgForm.shieldPersonnel = row.shieldPersonnel;
        this.sendMsgForm.visualRange = row.visualRange+'';
        if(row.termValidity=='2' && row.validityStartTime){
          this.sendMsgForm.validTime = [row.validityStartTime, row.validityEndTime]
        }else{
          this.sendMsgForm.validTime = [];
        }
        this.sendMsgForm.name = row.name;
        this.sendMsgForm.type = row.type+'';
        this.sendMsgForm.content = row.content;
        this.sendMsgForm.sendTelephone = row.sendTelephone;
        this.sendMsgVisible = true;
      },
      async dataInfo() {
        try {
          // let data = this.addDateRange(this.searchForm, this.sendTime, 'applyTimeStart', 'applyTimeEnd');
          // data = this.addDateRange(this.searchForm, this.auditTime, 'auditTimeStart', 'auditTimeEnd');
          this.loading = true;
          const result = await getMessageList(this.searchForm);
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      async addSendMsgSubmit(formName){
        let valid = await this.$refs[formName].validate().catch((err)=>{return err})
        if (valid) {
          this.btnLoading = true;
          let result = '';
          let data = JSON.parse(JSON.stringify(this.sendMsgForm));
          console.log(data.validTime)
          // if(data.validTime){
          //   data.validityStartTime = data.validTime[0];
          //   data.validityEndTime = data.validTime[1];
          //   data.termValidity = '2';
          // }else{
          //   data.validityStartTime = '';
          //   data.validityEndTime = '';
          //   data.termValidity = '1';
          // }


          if(!this.sendMsgForm.sendId){/*新增*/
            result = await addMessage(data);
          }else{/*修改*/
            result = await messageSendUpdate(data);
          }

          if (result.code == 200) {
            this.$message.success(result.msg);
            this.sendMsgVisible = false;
            this.dataInfo();
          } else {
            this.$message.error(result.msg);
          }
          this.btnLoading = false;
        }

      }

    }
  }
</script>

<style scoped lang="scss">
  #userDialog /deep/ .el-range-separator{
    width:10%;
  }
</style>
